<template>
	<div class="deposit">
		<div class="back">
			<i class="el-icon-erp-shangyiye backicon" @click="goback"></i>
			<p class="accountinformation" v-if="status == 1">充值</p>		
			<p class="accountinformation" v-else>提现</p>		
		</div>
		<div class="body">
			<div class="box">
				<p v-if="status == 1" class="optionprice">充值金额</p>
				<p v-else class="optionprice">提现金额</p>
				<div class="cash">
					<label>￥</label>
					<input type="number" v-model="price" />
				</div>
				<p v-if="status == 2" class="putprice">
					<span>可提现金额</span>
					<span style="padding-left: 5px;">{{cash}}元</span>
				</p>
			</div>
		</div>
		<div v-if="status == 1" class="middle">
			<div v-if="!!price" class="operation" @click="Recharge">从微信充值</div>
			<div v-else class="notoperation">从微信充值</div>
		</div>
		<div v-else class="middle">
			<div v-if="!!price" class="operation" @click="Put">提现到微信余额</div>
			<div v-else class="notoperation">提现到微信余额</div>
		</div>
	</div>
</template>

<script>
import { jsSDK } from '@/common/js/pay'

export default {
	name:'deposit',
	data () {
		return {
			status:'',
			price:'',
			cash:'',
			payWay:'充值'
		}
	},
	mounted () {
		this.status = this.$route.query.status
		this.cash = this.$route.query.price
	},
	methods:{
		goback() {
			this.$router.go(-1)
		},
		//提现
		Put () {
			let price = this.price.replace(/\s+/g,"")
			let reg=/^[0-9]+.?[0-9]*$/;
			if(price == null || price == ""){
				this.$messagebox.alert("请填写提现金额!")
				return false;
			}	
			if(!reg.test(price)){
				this.$messagebox.alert("请输入数字!")
				return false;
			}
			this.$http.post(this.$store.state.reqUrl + '/customer/account/entPay', {
				withdrawAmount: price
			}).then(res => {
				this.$toast({
					message:res.data,
					duration:2000
				})
				this.$router.go(-1)
			}).catch(res => {
				this.$toast(res.response.data)
			})
		},
		//充值
		Recharge () {
			let price = this.price.replace(/\s+/g,"")
			let reg=/^[0-9]+.?[0-9]*$/;
			if(price == null || price == ""){
				this.$messagebox.alert("请填写提现金额!")
				return false;
			}	
			if(!reg.test(price)){
				this.$messagebox.alert("请输入数字!")
				return false;
			}
			this.$http.put(this.$store.state.reqUrl + '/customer/account/recharge', {
				transactionAmount: price
			}).then(res => {
				jsSDK(res.data, this.payWay)
			}).catch(res => {
				this.$toast(res.response.data)
			})
		}
	}
}
</script>

<style lang="less" scoped>
.deposit {
	width: 100%;
	.back {
		width: 100%;
		background: #FFFFFF;
		height: 80px;
		display: flex;
		.backicon {
			width: 80px;
			line-height: 80px;
			color: gray;
			/*text-align: center;*/
			font-size: 36px;
			font-weight: 700;
		}
		p {
			flex: 1;
			color: #000000;
			line-height: 80px;
			font-size: 32px;
		}
	}
	.body {
		overflow-x: hidden;
		background: #FFFFFF;
		margin-top: 30px;
		.box {
			padding: 40px 30px 0 30px;
			.optionprice {
				font-size: 28px;
				padding-bottom: 30px;
			}
			.cash {
				display: flex;
				height: 100px;
				padding-bottom: 30px;
				label {
					width: 40px;
					line-height: 100px;
					font-size: 48px;
					color: #000000;
					font-weight: 800;
				}
				input {
					outline: none;
					flex: 1;
					padding-left: 15px;
					font-size: 60px;
				}
				input:focus {
					outline: none;
				}
			}
			.putprice {
				height: 80px;
				font-size: 28px;
				border-top: 1px solid gainsboro;
				line-height: 80px;
			}
		}
	}
	.middle {
		margin-top: 50px;
		.operation {
			margin: 0 auto;
			text-align: center;
			width: 80%;
			background: #1E90FF;
			height: 80px;
			border-radius: 18px;
			line-height: 82px;
			color: #FFFFFF;
			font-size: 32px;
		}
		.notoperation {
			text-align: center;
			margin: 0 auto;
			width: 80%;
			background: #1E90FF;
			opacity: 0.5;
			height: 80px;
			border-radius: 18px;
			line-height: 82px;
			color: #FFFFFF;
			font-size: 32px;
		}
	}
}
</style>